<template>
    <div class="radio-button-group">
        <div v-for="(option, index) in options" :key="index" class="radio-button"
            :class="{ selected: option.value === modelValue }" @click="selectOption(index,option.value)">
            {{ option.label }}
        </div>
    </div>
</template>

<script setup>
import { defineEmits, defineProps, onMounted } from 'vue';

const props = defineProps({
    options: {
        type: Array,
        required: true,
    },
    modelValue: {
        type: String,
        default: '',
    },
});

const emit = defineEmits(['update:modelValue', 'optionSelected']);

// 在组件挂载时，如果没有选中值，则选中第一项
onMounted(() => {
    if (!props.modelValue && props.options.length > 0) {
        emit('update:modelValue', props.options[0].value);
    }
});

const selectOption = (index,value) => {
    emit('update:modelValue', value);
    emit('optionSelected', index); // 发出自定义事件
};
</script>

<style scoped>
.radio-button-group {
    margin-top: 70px;
    display: flex;
    width: 60px;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    /* padding: 0px 16px; */
}

.radio-button {
    height: 50px;
    width: 50px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    background-color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.radio-button:hover {
    background-color: #ebebeb;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.radio-button.selected {
    background-color: #2563eb;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.radio-button.selected:hover {
    background-color: #1d4ed8;
}
</style>